var CounterItem = require('geoVisualCounterItem');
/**
 * 可视化计数器
 */
cc.Class({
    extends: cc.Component,

    properties: {
        target:{
            default: null,
            type:cc.Node,
            tooltip:'用于事件传递的目标节点',
        },
        usePrefab: {
            default:null,
            type: CounterItem,
            tooltip:'item的预制'
        },
        numItemsFromPrefab:{
            default:0,
            type: cc.Integer,
            tooltip: '要创建多少prefab实例',
        },
        itemsContainer:{
            default:null,
            type: cc.Node,
            tooltip:'用来放置item的容器'
        },
        items:{
            default:[],
            type:[CounterItem],
            tooltip:'用于计数显示的单元',
        },
        count:{
            default: 0,
            type:cc.Integer,
            tooltip:'当前计数值',
        },
        limitCountOnItems:{
            default: true,
            tooltip:'限制计数器的值在0到items数量之间',
        },
        countOnLoad: {
            default: false,
            tooltip:'在加载时设置指定计数值',
        },
        changeEvents:{
            default:[],
            type:[cc.Component.EventHandler],
            tooltip:'count变化是触发'
        }
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        this.target = this.target || this.node;

        if (this.usePrefab) {
            this.createItems(this.usePrefab, this.numItemsFromPrefab);
        }

        this.setCount(this.count);
    },
    /**
     * 设置计数
     * @param {cc.Integer} count 
     */
    setCount(count){
        this.count = count;
        //
        this._limitCount();
        // 熄灭所有items
        this._setItems(false);
        // 点亮相应数量的items
        this._setItems(true, this.count);
        // 触发事件
        this.target = this.target || this.node;
        // 创建要传递的事件
        var e = new cc.Event.EventCustom('dataChange');
        // 设置事件的发生节点
        e.target = this.target;
        // 将计数及当前组件实例放入用户数据
        e.setUserData({
            count: this.count,
            component: this,
        });
        // 触发事件
        cc.Component.EventHandler.emitEvents(this.changeEvents, e, this.count, this);
    },
    /**
     * 递变计数
     * 递增或递减可以使用 stepCount(1) 或 stepCount(-1)
     * @param {cc.Integer} step 递变的补偿
     */
    stepCount(step){
        this.count += step;
        this.setCount(this.count);
    },
    /**
     * 方便按钮调用
     */
    incCount(){
        this.stepCount(1);
    },
    /**
     * 方便按钮调用
     */
    decCount(){
        this.stepCount(-1);
    },
    /**
     * 从prefab创建指定数量的item
     * 会清空之前的item
     * @param {geoVisualCounterItem} prefab 
     * @param {cc.Integer} numCreate 
     */
    createItems(prefab, numCreate) {
        this._clearItems();
        //
        for (var n = 0; n < numCreate; ++n) {
            var item = cc.instantiate(prefab.node);
            this.itemsContainer.addChild(item);
            this.items.push(item.getComponent(CounterItem));
        }
        //
        this.setCount(this.count);
    },
    /**
     * 设置指定数量items为指定状态
     * @param {bool} state 指定的状态
     * @param {cc.Integer} numItems 指定的items数量
     */
    _setItems(state, numItems){

        numItems = (void 0 === numItems) ? this.items.length : numItems;

        for(var i = 0; i < this.items.length && i < numItems; ++i)
            this.items[i].setState(state);
    },
    /**
     * 设置指定下标的item为指定状态
     * @param {cc.Integer} i 
     * @param {bool} state 
     */
    _setItem(i, state) {
        var item = this.items[i];
        item && item.setState(state);
    },
    /**
     * 限制计数范围
     */
    _limitCount(){
        if (this.limitCountOnItems === true) {
            if (this.count < 0)
                this.count = 0;
            if (this.count > this.items.length)
                this.count = this.items.length;
        }
    },
    /**
     * 清空所有item
     */
    _clearItems(){
        for(var i = 0; i < this.items.length; ++i)
            this.items[i].node.removeFromParent();
        //
        this.items = [];
    },
    testOnDataChange(e, data){
        cc.log('dataChange: ' + data);
    },
    // update (dt) {},
});
